<%@page import="com.grupobbva.seguridad.util.Constante"%>
<%@ include file="../../inc/comunAjax.jsp" %>
<style>
	#opcionId      {width: 100px;}
	#tipoId        {width: 100px;}
	#estadoId      {width: 100px;}
	#nombreCorto   {width: 100px;}
	#nombreLargo   {width: 100%;}
	#descripcion   {width: 100%; height: 75px;}
	#url           {width: 100%;}
	#opcionPadreId {width: 100%;}
	#orden         {width: 100px;}
	#imgOpcion     {width: 50px; height: 53px;}
	#btnImagen     {width: 100%}
	.tdImagen      {text-align: center !important; vertical-align: middle !important;}
	#imagen        {width: 100%}
	#divRegistro3  {display: none; height: 50px}
</style>
<script type="text/javascript">
TIPO_WEB  = "<%=Constante.TD_APLICACION_WEB%>";
TIPO_MENU = "<%=Constante.TD_OPCION_SUBMENU%>";
ORDEN_OPC = "${opcion.orden}";
</script>
<form:form method="post" action="opcreg.do" commandName="opcion">
<form:hidden path="id.aplicacionId"/>
<form:hidden path="id.opcionId" id="opcionId"/>
<form:hidden path="arbol"/>
<table class="tblFormulario">
	<tr><td class="etiqueta">C&oacute;digo</td>
		<td class="valor noeditable">${opcion.id.opcionId}</td>
		<td class="etiqueta">Tipo <label class="asterisco">*</label></td>
		<td class="valor">
			<form:select path="tipo.detalleId" id="tipoId" cssClass="obligatorio" onclick="cambiarTipo();">
				<form:options items="${tipos}" itemValue="detalleId" itemLabel="nombreLargo"/>
			</form:select>
		</td>
		<td class="etiqueta">Estado <label class="asterisco">*</label></td>
		<td class="valor">
			<form:select path="estado.detalleId" id="estadoId" cssClass="obligatorio">
				<form:options items="${estados}" itemValue="detalleId" itemLabel="nombreLargo"/>
			</form:select>
		</td>
	</tr>
	<tr>
		<td class="etiqueta">Nombre Corto <label class="asterisco">*</label></td>
		<td class="valor"><form:input path="nombreCorto" cssClass="obligatorio" maxlength="10"/></td>
		<td class="etiqueta">Nombre Largo <label class="asterisco">*</label></td>
		<td class="valor" colspan="3"><form:input path="nombreLargo" cssClass="obligatorio" maxlength="100"/></td>
	</tr>
	<tr>
		<td class="etiqueta" valign="top">Descripci&oacute;n <label class="asterisco">*</label></td>
		<td class="valor" colspan="3"><form:textarea path="descripcion" cssClass="obligatorio"/></td>
		<td class="etiqueta" valign="top">Imagen</td>
		<td class="valor tdImagen">
			<a href="javascript:buscarImagen();"><img src="opcverimg.do" id="imgOpcion"/></a>
		</td>
	</tr>
	<tr>
		<td class="etiqueta">Opci&oacute;n Superior</td>
		<td class="valor" colspan="3" id="tdOpcionSuperior">		
			<form:select path="opcionPadreId" onchange="cambiarOpcionSuperior()">
				<form:option value="" label="--Seleccione--"></form:option>
				<form:options items="${opciones}" itemValue="id.opcionId" itemLabel="nombreLargoJerarquico"/>
			</form:select>
		</td>
		<td class="etiqueta">Orden <label class="asterisco">*</label></td>
		<td class="valor" id="tdOrden">&nbsp;</td>
	</tr>
	<tr class="soloWeb">
		<td class="etiqueta">URL <label class="asterisco" id="url_">*</label></td>
		<td class="valor" colspan="5"><form:input path="url" cssClass="obligatorio soloWeb" maxlength="200"/></td>
	</tr>
</table>
</form:form>
 
<div id="divRegistro3">
<form id="formImagen" method="post" action="opcuplimg.do" enctype="multipart/form-data" target="iframeImagen">
<center><input type="file" name="imagen" id="imagen" onchange="seleccionarImagen();"/></center>
<!-- input type="button" value="Ver" onclick="cargarImagen()" -->
</form>
<iframe id="iframeImagen" name="iframeImagen" style="display: none"></iframe>
</div>